<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/common.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/jquery3.5.1.js"></script>
		<link href="../layui/css/layui.css" rel="stylesheet">
		<script src="../layui/layui.js"></script>
		<link href="../css/myvideo.css" rel="stylesheet">
		<script src="../js/jquery-cropper.js"></script>
		<link rel="stylesheet" href="../css/compile.css" />
		<script src="../js/cropper.js"></script>
		<link rel="stylesheet" href="../css/cropper.css" />
		<title>编辑个人信息</title>
	</head>
	<body>
		<div id="app">
			<div id="topbox">
				<img width="100" class="bj" src="../img/背景.jpg">
				<img class="tou" id="upimg" :src="userinfo.headImg" />
				<i id="iocntu" class="layui-icon layui-icon-camera-fill" style="font-size: 35px; color: #E8E8E8;"></i>
				<span class="wen">点击修改头像</span>
			</div>
			<div id="bigbox">
				<el-form ref="form" :model="userinfo" label-width="80px">
					<el-form-item label="用户名">
						<input v-model="userinfo.userName"></input>
					</el-form-item>
					<el-form-item label="逗比号">
						<input readonly v-model="userinfo.userAccount"></input>
					</el-form-item>
					<el-form-item label="手机号">
						<input v-model="userinfo.phoneNum"></input>
					</el-form-item>
					<el-form-item label="地区">
						<el-select id="sel" v-model="userinfo.address" placeholder="请选择地区">
							<el-option label="湖南" value="湖南"></el-option>
							<el-option label="广东" value="广东"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="个人签名">
						<textarea rows="5" cols="5" v-model="userinfo.synopsis"></textarea>
					</el-form-item>
					<el-form-item label="性别">
						<el-radio-group v-model="userinfo.gender">
							<el-radio label="男"></el-radio>
							<el-radio label="女"></el-radio>
							<el-radio label="保密"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button type="danger" @click="saveorupdate()">保存</el-button>
						<el-button onclick="location.href='mine.html'" class="qu">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div id="updateimg">
				<div class="xiu">修改头像
					<i id="cha" class="layui-icon layui-icon-close" style="font-size: 20px; color: white;"></i>
				</div>
				<div id="head">
					<img id="headimg" style="overflow:hidden;" src="../img/默认头像.png" />
				</div>
				<div id="xiaohead" style="overflow:hidden;"></div>
				<!-- <img id="xiaohead"  src="../img/默认头像.png"/> -->
				<span class="yulan">头像预览</span>
				<div id="huakuai">
					<el-button type="danger" id="save">保存</el-button>
					<el-button id="quimg" type="info">取消</el-button>
				</div>

			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				userinfo: {}
			},
			methods: {
				saveorupdate() {
					// let map = new Map()
					// map.set("userinfo", this.userinfo)
					// let jsonData = Object.fromEntries(map);
					if (this.userinfo.gender === "女") {
						this.userinfo.gender = 1;
					} else if (this.userinfo.gender === "男") {
						this.userinfo.gender = 0;
					} else {
						this.userinfo.gender = 2;
					}
					axios.post(API + "saveUserInfo", this.userinfo).then(res => {
						if (res.data==1) {
							this.$message.success('修改成功')
							this.initUserInfo();
						}else if(res.data==2){
							this.$message.warning('修改失败,手机号已存在')
						} else {
							this.$message.warning('修改失败')
						}
					})
				},
				initUserInfo() {
					this.userinfo.userId = window.localStorage.getItem("userid");
					axios.get(API + "selectUserInfo?userid="+this.userinfo.userId).then(res => {
						//获取数据
						this.userinfo = res.data;
						if (this.userinfo.gender === 1) {
							this.userinfo.gender = "女";
						} else if (this.userinfo.gender === 0) {
							this.userinfo.gender = "男";
						} else {
							this.userinfo.gender = "保密";
						}
					})
				}
			},
			mounted() {
				//初始化
				this.initUserInfo();
				
			}
		})
	</script>
	<script src="../js/compile.js"></script>
</html>